<template>
  <el-dialog
    title="工作交接日志"
    :visible.sync="dialogVisible"
    :modal="true"
    :appendToBody="true"
    width="88%"
    v-dialog-drag
    :close-on-click-modal="false"
    top="5vh"
    class='dialog-report-dis'
    :loading="saveloading"
    @close="handleClose()"
    @open="handleOpen()"
  >
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      label-width="68px"
    >
      <el-form-item>
        <organizationCascader
          :clearable="true"
          :arrData="queryParams"
          @change="change"
          :showData="{
            factory:false,
            workshop:true,
            line:true,
            workStation:true
          }"
          :clearData='{
            workshop:true,
            line:true,
            workStation:true
          }'
          :sizeData = '{
            workshop:"mini",
            line:"mini",
            workStation:"mini"
          }'
        ></organizationCascader>
      </el-form-item>

      <el-form-item prop="searchDate">
        <el-date-picker
          v-model="queryParams.searchDate"
          type="date"
          placeholder="请选择时间"
          size="mini"
          value-format="yyyy-MM-dd"
          clearable
          @change="selectDate"
        >
        </el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="getHostoryList"
          >查询</el-button
        >
      </el-form-item>
    </el-form>

    <!-- <div v-infinite-scroll="load"
      :infinite-scroll-disabled="isInfiniteScrollDisabled"
      infinite-scroll-immediate="false"
      style="height:440px;overflow-y:auto"
    > -->
    <div v-loading="saveloading">
      <div v-for="item in logList" :key="item.id">
        <div>
          <PartitionTitle :title="item.dateTime" type='line'></PartitionTitle>
        </div>

        <workLogItem
          :row='item'
          :isDisabled="true"
          v-if='isShowWork'
          mode="history"
          ref="workForm"
        />
        <el-form label-width="110px" disabled>
          <el-row style="width:100%">
            <el-col :span="12">
              <el-form-item label="最后提交时间" prop='logUpdateDate'>
                <el-input type="text" placeholder="最后提交时间" v-model="item.logUpdateDate">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div v-if='!logList.length' class="error-tips">暂无数据</div>
    </div>
    <span slot="footer" class="dialog-footer">
      <!-- <el-button  @click="dialogVisible = false">关闭</el-button> -->
      <pagination
        v-if='pager.total > 5'
        :total="pager.total"
        :pageSizes="[5,10,20]"
        :page.sync="pager.pageNum"
        :limit.sync="pager.pageSize"
        @pagination="getHostoryList"
      />
    </span>
  </el-dialog>
</template>
<script>
  import {getHistoryLog } from "@/api/workbench/index";
  import organizationCascader from "@/views/components/organizationCascader";
  import workLogItem from "./workLogItem";
  import { mapState,mapGetters, mapMutations,mapActions } from "vuex";
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    row: {
      type: [Object,Array],
      default: null
    },
    total:{
      type: [Number,String],
      default: 0
    },
    defaltSearch:{
      type: Object,
      default: null
    }
  },
  data() {
    return {
      queryParams:{
        factoryDeptCode:null,
        workshopCode:null,
        workshopId:null,
        lineId:null,
        stationId:null,
        workStationCode:null,
        searchDate:null
      },
      pager: {
        total: 0,
        pageNum: 1,
        pageSize: 5
      },
      logList:[],
      saveloading:false,
      isShowWork:false,
      isInfiniteScrollDisabled:false,
      isNoMore:false
    };
  },
  computed: {
    dialogVisible: {
      set(val) {
        this.$emit("update:visible", val)
      },
      get() {
        return this.visible
      }
    },
    // logList: {
    //   set(val) {
    //     return val
    //   },

    //   get() {
    //     return this.row
    //   }
    // },
    ...mapGetters([
      'baseDeptCode'
    ]),
  },

  methods: {
    handleClose() {
      this.resetFormData()
    },

    handleOpen() {
      this.queryParams = Object.assign({},this.queryParams,this.defaltSearch);
      this.queryParams.factoryDeptCode = this.baseDeptCode;
      this.isShowWork = true;
    },

    getHostoryList(){
      this.isInfiniteScrollDisabled = true;
      this.saveloading = true;
      const { pageNum, pageSize } = this.pager;
      const {workshopId,stationId,lineId,searchDate} = this.queryParams
      const parmas = {
        query:{
          workshopId,
          stationId,
          lineId,
          searchDate
        },
        pageNum,
        pageSize
      }
      getHistoryLog(parmas)
      .then((res) => {
        if(res.code == 200 && res?.rows?.length){
          this.logList = res?.rows;
          this.pager.total = res?.total;
          // if(this.pager.pageNum == 1) {
          //   if (res?.rows.length > 0) {
          //     this.logList = res?.rows;
          //     this.isNoMore = false;
          //   }else{
          //     this.logList = [];
          //     this.isNoMore = true;
          //   }
          // }
          // else{
          //   if (res?.rows.length > 0){
          //     this.logList = this.logList.concat(res?.rows);//数组拼接，得到拼接后的数据
          //     this.isNoMore = false;
          //   }else{
          //     this.isNoMore = true;
          //   }
          // }
          this.saveloading = false;
        }else{
          this.msgError("暂无历史日志")
          this.logList = [];
          this.saveloading = false;
          this.isNoMore = false;
        }
        this.isInfiniteScrollDisabled = false;
      })
      .catch(() => {
        this.msgError("暂无历史日志")
        this.logList = [];
        this.saveloading = false;
        this.isNoMore = false;
      });
    },

    change({factoryDeptCode,workshopCode,workshopId,lineId,workStationId,workStationCode}){
      this.queryParams = {
        factoryDeptCode,
        workshopCode,
        workshopId,
        lineId,
        stationId:workStationId,
        workStationCode,
        searchDate:this.queryParams.searchDate
      }
      this.isInfiniteScrollDisabled = false;
      this.isNoMore = false;
      this.pager.pageNum = 1;
    },
    selectDate(){
      this.isInfiniteScrollDisabled = false;
      this.isNoMore = false;
      this.pager.pageNum = 1;
    },
    resetFormData(){
      this.logList = [];
      this.saveloading = false;
      this.isInfiniteScrollDisabled = false;
      this.isNoMore = false;
      this.isShowWork = false;
      this.pager.pageNum = 1;
      this.queryParams = {
        factoryDeptCode:null,
        workshopCode:null,
        workshopId:null,
        stationId:null,
        workStationCode:null,
        lineId:null,
        searchDate:null
      };
    },
    load () {
      if(!this.isNoMore){
        this.pager.pageNum += 1;
      }
      setTimeout(() => {
        this.getHostoryList()
      },1000)
    }
  },
  components:{
    workLogItem,
    organizationCascader
  },
  watch:{
    row:{
      handler(list){
        if(list?.length){
          this.logList = list;
        }
      },
      deep: true,
      immediate: true
    },
    total:{
      handler(num){
        this.pager.total = num;
      },
      deep: true,
      immediate: true
    }
  }
};
</script>
<style lang="scss" scoped>
.el-form {
  // display: flex;
  // justify-content: space-between;
  // flex-flow: wrap;
  // .el-form-item {
  //   width: 49%;
  // }
  .el-date-editor.el-input,
  .el-select {
    width: 100%;
  }
}
::v-deep.dialog-report-dis{
  .el-dialog {
    .el-dialog__body{
      padding:1.0rem 1.25rem;
      .data-load{
         height:100%;
         line-height: 400px;
         text-align: center;
      }
      .error-tips{
        width: 100%;
        height: 100%;
        text-align: center;
        line-height: 440px;
        color: #909399;
      }
    }
    .dialog-footer{
      .pagination-container{
        margin: 0;
      }
    }
  }
}

</style>
